<template>
  <div class="box">
    <!--
    <h1  :class="['类名1', flag ? '类名2' : '']">xxxxx</h1>
    <h1  :class="{类名1: true, 类名2: flag}">xxxxx</h1>
    -->
    <h4 :class="{aa:true, bb:flag }">组件的样式问题</h4>
    <my-left></my-left>
    <button @click="flag =!flag"> 切换类名</button>
    <p :style="{ padding: '5px', color:'red' }"> 我是父组件中的p</p>
  </div>
</template>

<script>
import myLeft from './components/my-left.vue'
export default {
  components: { myLeft },
  data(){
    return {
      flag: true
    }
  }
}
</script>

<style lang="less" scoped>
  .box{
    
    min-height: 50px;
   
    p{
      background-color: aqua;
      color: chocolate;
    }

  }
  .aa{
    color: cyan;
  }
  .bb{
    font-weight: normal;
  }
  .box/deep/p{
    color: #666;
  }
</style>

